// components/elements/LicenseSection
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Box, Typography, Button } from '@mui/material';
import GavelOutlinedIcon from '@mui/icons-material/GavelOutlined';

// eslint-disable-next-line no-unused-vars
export const LicenseSection = ({ darkMode = false, iconSx, largeHeaderSx, smallHeaderSx, buttonSx, listItemSx }) => {
  const navigate = useNavigate();
  const [isButtonPressed, setIsButtonPressed] = useState(false);
  
  const navigatePage = (url) => {
    window.open(url, '_blank', 'noopener,noreferrer');
  };

  const navigateOpen = (path) => {
    if (path.startsWith('http')) {
      navigatePage(path);
    } else {
      navigate(path);
    }
  };
  
  // Handle button press state
  const handlePointerDown = () => {
    setIsButtonPressed(true);
  };
  
  const handlePointerUp = () => {
    setIsButtonPressed(false);
  };
  
  return (
    <Box sx={{ 
      display: 'flex', 
      flexDirection: 'column',
      alignItems: 'center'
    }}>
      <GavelOutlinedIcon sx={iconSx} />
      
      <Box sx={{ width: '100%', textAlign: 'left', mt: 2 }}>
        <Typography 
          fontWeight="medium"
          sx={largeHeaderSx}
        >
          MIT Licensed
        </Typography>
        
        <Typography 
          sx={smallHeaderSx}
        >
          Full ownership, no restrictions. Clone and customize with our permissive MIT license.
        </Typography>
        
        <Box sx={{ display: 'flex', justifyContent: 'center', mt: 3 }}>
          <Button
            onClick={() => navigateOpen('https://github.com/startersaas')}
            onPointerDown={handlePointerDown}
            onPointerUp={handlePointerUp}
            onPointerLeave={handlePointerUp}
            className={isButtonPressed ? 'pressed' : ''}
            sx={buttonSx}
          >
            Get the starters
          </Button>
        </Box>
      </Box>
    </Box>
  );
};